<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WFPlayer.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="WFPlayer.js is an audio waveform generator" />
    <meta name="keywords" content="WFPlayer, audio, waveform, generator" />
    <link rel="shortcut icon" href="./assets/img/favicon.ico" />
    <link rel="stylesheet" href="./assets/css/normalize.css" />
    <link rel="stylesheet" href="./assets/css/artplayer.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
    <link rel="stylesheet" href="./assets/css/pickr.css" />
    <link rel="stylesheet" href="./assets/css/powerange.css" />
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="left">
                <a href="/">
                    <span class="logo">WFPlayer.js</span>
                    <span class="version">Beta 1.0.0</span>
                    <span class="description">An Audio Waveform Generator</span>
                </a>
            </div>
            <div class="right">
                <a class="github" href="https://github.com/zhw2590582/WFPlayer">
                    Github
                </a>
                <div class="item">
                    Open Video
                    <input class="open" type="file" name="file" />
                </div>
                <div class="item download">Download Image</div>
            </div>
        </header>
        <section class="main">
            <div class="left">
                <div class="item infos">
                    <div class="info">
                        <div class="name">File Size :</div>
                        <div class="controller filesize">0 M</div>
                    </div>
                    <div class="info">
                        <div class="name">Number Of Channels :</div>
                        <div class="controller numberOfChannels">0</div>
                    </div>
                    <div class="info">
                        <div class="name">Sample Rate :</div>
                        <div class="controller sampleRate">0</div>
                    </div>
                </div>
                <div class="item infos">
                    <div class="info">
                        <div class="name">Downloading :</div>
                        <div class="controller downloading">0 %</div>
                    </div>
                    <div class="info">
                        <div class="name">Decodeing :</div>
                        <div class="controller decodeing">0 %</div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Wave Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="waveColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Progress Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="progressColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Cursor Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="cursorColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Ruler Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="rulerColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Grid Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="gridColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Background Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="backgroundColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Padding Color :</div>
                    <div class="controller">
                        <div class="color-picker" name="paddingColor"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">Duration :</div>
                    <div class="controller range">
                        <span class="value">10</span>
                        <input type="text" name="duration" value="10" style="display: none;">
                    </div>
                </div>
                <div class="item">
                    <div class="name">Padding :</div>
                    <div class="controller range">
                        <span class="value">5</span>
                        <input type="text" name="padding" value="5" style="display: none;">
                    </div>
                </div>
                <div class="item">
                    <div class="name">Wave Scale :</div>
                    <div class="controller range">
                        <span class="value">0.8</span>
                        <input type="text" name="waveScale" value="0.8" min="0.1" max="2" step="0.1" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="artplayer"></div>
            </div>
        </section>
        <footer class="waveform"></footer>
    </div>
    <script src="./uncompiled/wfplayer.js"></script>
    <script src="./assets/js/artplayer.js"></script>
    <script src="./assets/js/pickr.js"></script>
    <script src="./assets/js/powerange.js"></script>
    <script src="./assets/js/index.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var isLocalhost = Boolean(
                window.location.hostname === 'localhost' ||
                window.location.hostname === '[::1]' ||
                window.location.hostname.match(
                    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
                )
            );
            if (!isLocalhost) {
                var hm = document.createElement('script');
                hm.src = 'https://hm.baidu.com/hm.js?cd425c6b70404ba52be05e13b839e229';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(hm, s);
            }
        })();

    </script>
</body>

</html>
